import React, { useState, useEffect } from 'react'
import { Image, Spin } from 'antd' // 引入 Spin 组件作为加载指示器

const FetchImage = ({ id }) => {
  const [imageSrc, setImageSrc] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 假设你的后端API需要ID作为查询参数
    const apiEndpoint = `/file/image?fileId=${id}`

    // 使用 fetch 获取后端图片二进制数据
    fetch(apiEndpoint, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        // 其他需要的请求头...
      },
      responseType: 'blob', // 指定响应类型为blob
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok.')
        }
        return response.blob() // 直接获取blob
      })
      .then((blob) => {
        if (blob) {
          const url = URL.createObjectURL(blob)
          setImageSrc(url) // 使用创建的URL来设置Image组件的src
          setLoading(false) // 设置加载状态为false
        }
      })
      .catch((error) => {
        console.error('There was a problem with the fetch operation:', error)
        setLoading(false) // 捕获错误后也设置加载状态为false
      })

    return () => {
      // 组件卸载时清除URL
      if (imageSrc) {
        URL.revokeObjectURL(imageSrc)
      }
    }
  }, [id]) // 依赖于id，如果id改变，effect重新运行

  // 如果图片还在加载，显示加载指示器
  if (loading) {
    return <Spin tip="Loading..." />
  }

  // 如果imageSrc存在，渲染Image组件，否则显示错误信息或占位图
  return imageSrc ? (
    <Image src={imageSrc} preview={false} />
  ) : (
    <div>Image not found.</div>
  )
}

export default FetchImage
